<template>
  <div class="container" :style="{ height: commonVar.breadcrumbHeight + 'px' }">
    <div class="left">
      <div v-if="tagStore.tagList.length > 12">
        <n-icon :size="20"
          ><ArrowPrevious20Regular @click="changeLeft"
        /></n-icon>
      </div>

      <n-config-provider
        :theme-overrides="{
          Scrollbar: {
            railInsetHorizontal: '0 0 0 auto',
            borderRadius: 0,
          },
        }"
        style="max-width: 100%"
      >
        <n-scrollbar x-scrollable ref="scrollbarRef">
          <div style="white-space: nowrap">
            <n-tag
              closable
              @close="handleClose(item, index)"
              @click="handleRouter(item)"
              v-for="(item, index) in tagStore.tagList"
              :key="index"
              :type="item.name === route.name ? 'primary' : ''"
              :bordered="commonVar.tagBorder"
            >
              {{ item.label }}
            </n-tag>
          </div>
        </n-scrollbar>
      </n-config-provider>

      <div v-if="tagStore.tagList.length > 12">
        <n-icon :size="20"><ArrowNext20Regular @click="changeRight" /></n-icon>
      </div>
    </div>

    <div class="right">
      <n-dropdown
        trigger="click"
        :options="tagOptions"
        @select="handleSelectTag"
        placement="bottom-end"
      >
        <n-icon :size="20"><Apps20Filled @click="handleCloseTags" /></n-icon>
      </n-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, h } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import { useTagStore } from "@/stores/models/tag";
import { ArchiveOutline } from "@vicons/ionicons5";
import { useMessage, NIcon } from "naive-ui";
import {
  ArrowNext20Regular,
  ArrowPrevious20Regular,
  Apps20Filled,
  PaddingLeft20Regular,
  ArrowImport20Regular,
  ArrowAutofitWidth20Regular,
} from "@vicons/fluent";
import router from "@/router";
import { useRoute } from "vue-router";
import { useBreadcrumbStore } from "@/stores/models/breadcrumb";

const renderIcon = (icon) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};
const message = useMessage();
const route = useRoute();
const themeStore = useThemeStore();
const tagStore = useTagStore();
const breadcrumbStore = useBreadcrumbStore();
const commonVar = themeStore.commonVar;
const scrollbarRef = ref(null);
const currentTag = ref(route.name);
const tagOptions = [
  {
    label: "关闭左侧标签页",
    key: "left-tag",
    icon: renderIcon(PaddingLeft20Regular),
    props: {
      onClick: () => {
        message.success("Good!");
      },
    },
  },
  {
    label: "关闭右侧标签页",
    key: "right-tag",
    icon: renderIcon(ArrowImport20Regular),
    props: {
      onClick: () => {
        message.success("Good!");
      },
    },
  },
  {
    label: "关闭全部标签页",
    key: "all-tag",
    icon: renderIcon(ArrowAutofitWidth20Regular),
    props: {
      onClick: () => {
        message.success("Good!");
      },
    },
  },
];

const leftOption = {
  left: -400,
  top: 0,
  behavior: "smooth",
};
const changeLeft = () => {
  scrollbarRef.value.scrollBy(leftOption);
};

const rightOption = {
  left: 400,
  top: 0,
  behavior: "smooth",
};
const changeRight = () => {
  scrollbarRef.value.scrollBy(rightOption);
};

//清除标签
const handleClose = (item, index) => {
  let length = tagStore.tagList.length - 1;
  //移除pina中的面包屑
  tagStore.clearTags(item);
  if (item.name !== route.name) {
    return;
  }
  if (index === length) {
    currentTag.value = tagStore.tagList[index - 1].name;
    router.push({ name: tagStore.tagList[index - 1].name });
  } else {
    router.push("/");
  }
};

//路由跳转
const handleRouter = (tag) => {
  router.push({ path: tag.key });
  //添加面包屑
  breadcrumbStore.setBreadcrumb(tag);
};
</script>
<style scoped lang='scss'>
.n-tag {
  margin-right: 8px;
  cursor: pointer;
}
.container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;

  .left {
    display: flex;
    align-items: center;
    width: 94%;
  }
}

.n-icon svg {
  cursor: pointer;
}
</style>